<template>
    <el-container class="dashboard">
        <!-- menu start -->
        <div :class="['menu-collapse', isCollapse && 'isCollapse']" v-show="!$route.path.includes('application/create')&&!$route.path.includes('application/edit')&&!$route.path.includes('application/excreate')&&!$route.path.includes('application/exedit')">
            <el-menu
                :collapse="isCollapse"
                :default-active="activeMenu"
                active-text-color="#fff"
                class="dashboard-menu" router>
                <template>
                    <router-link class="site flex items-center cursor-pointer" to="/" tag="li" :style="isCollapse && 'width: 80px;'">
                        <img src="~static/images/logo.png" height="48" width="48" class="logo">
                        <span class="title">胶我选后台管理</span>
                    </router-link>
                </template>

                <!-- v-if="role && !route.name.includes('Check') || !role" -->
                <template v-for="(route, index) in menus">
                    <template v-if="route.children">
                        <el-submenu :index="route.name" >
                            <template slot="title">
                                <img :src="require('static/images/' + route.icon + '.png')" class="iconfont">
                                <span>{{ route.title }}</span>
                            </template>
                            <el-menu-item v-for="(cRoute, cIndex) in route.children"
                                          :key="cIndex"
                                          :index="cRoute.name"
                                          @click="jump(cRoute)"
                                          :route="cRoute.name === 'Application.Create' ||cRoute.name === 'Application.ExCreate'  ? {name: 'Home.Index'} : cRoute">
                                <span slot="title">{{ cRoute.title }}</span>
                            </el-menu-item>
                        </el-submenu>
                    </template>
                    <!-- :route="route" v-if="role && !route.name.includes('Check') || !role" -->
                    <template v-if="!route.children">
                        <el-menu-item :index="route.name">
                            <i class="fa fa-list-ul" aria-hidden="true"></i>
                            <span slot="title">{{ route.title }}</span>
                        </el-menu-item>
                    </template>
                </template>
            </el-menu>
        </div>
        <!-- menu end -->

        <!-- content start -->
        <el-container>
            <el-header class="dashboard-header flex items-center justify-between" v-show="!$route.path.includes('application/create') && !$route.path.includes('application/edit')&&!$route.path.includes('application/excreate')&&!$route.path.includes('application/exedit')">
                 <i aria-hidden="true"
                    @click="changeCollaspe"
                    :class="{'el-icon-d-arrow-left': !isCollapse, 'el-icon-d-arrow-right': isCollapse}">
                </i>
                <div class="user-info">
                    <i class="iconfont icon-0301renxiang"></i>
                    <span>{{ my.cnname }}</span>

                    <router-link tag="div" :to="{name: 'Message.Index'}" class="inline-block cursor-pointer mesg">
                        <i class="iconfont icon-mail"></i>
                        <span>通知</span>
                        <span :style="{color: mesgNum && 'red'}">{{ mesgNum || ' ' }}</span>
                    </router-link>

                    <div class="inline-block cursor-pointer" @click="logout">
                        <i class="iconfont icon-shutdown"></i>
                        <span>退出</span>
                    </div>
                </div>
            </el-header>

            <el-main class="dashboard-content">
                <router-view></router-view>
            </el-main>
        </el-container>
        <!-- content end -->
    </el-container>
</template>

<script>
    import debounce from 'lodash/debounce';
    import {
        Container, Header, Main,
        MenuItem, Menu, Submenu
    } from 'element-ui';

    export default {
        components: {
            ElContainer: Container,
            ElHeader: Header,
            ElMain: Main,
            ElMenu: Menu,
            ElMenuItem: MenuItem,
            // ElMenuItemGroup: MenuItemGroup,
            ElSubmenu: Submenu,
        },
        props: [],
        data() {
            return {
                activeMenu: '',
                isCollapse: document.body.clientWidth < 1024,
                my: SessionStore.get('userMesg'),
                mesgNum: 0,
            };
        },
        computed: {
            menus() {
                const index = this.$router.options.routes.length - 1;
                console.log(this.$router.options.routes[index].children)
                console.log(this.filterMenus(this.$router.options.routes[index].children))
                return this.filterMenus(this.$router.options.routes[index].children);
            },
            role() {
                const role = SessionStore.get('loginMesg').role;

                // 企业用户、品牌管理员、超级管理员
                let arr = ['5ad5cac1d8219eca40241aa8', '5ad812751b03e49386ae960c','5ab07114076547341878f520', '570b6c19d3bebd0c4d09b7ba'];
                return arr.findIndex(el => el === role) < 0 ? 0 : arr.findIndex(el => el === role) + 1 ;
            },
            roleName() {
                const role = SessionStore.get('loginMesg').role;
                let arr = [
                    {
                        key:'5ad5cac1d8219eca40241aa8',
                        name:'企业用户'
                    },
                    {
                        key:'5ad812751b03e49386ae960c',
                        name:'品牌管理员'
                    },
                    {
                        key:'5ab07114076547341878f520',
                        name:'频道管理员'
                    },
                    {
                        key:'570b6c19d3bebd0c4d09b7ba',
                        name:'超级管理员'
                    }
                ];
                let _arr = arr.filter(el=>el.key === role)
                return  _arr.length > 0 ? _arr[0].name : '个人用户'
            }
        },
        watch: {
            '$route'(to, from) {
                this.setActiveMenu();
                if (to.name === 'Message.Index') {
                    this.mesgNum = 0;
                }
            },
        },
        methods: {
            filterMenus(arr) {
                return arr.filter(i =>  {
                    return  (!!i.title&&!!i.meta&&(this.role + 2) > i.meta.rank) || (!!i.title&&i.meta&&i.meta.roleName&&i.meta.roleName.indexOf(this.roleName) >= 0)
                    }).map(i => {
                    
                    if (i.children && i.children.length) {
                        i.children = this.filterMenus(i.children);
                    }
                    if (i.children && !i.children.length) {
                        delete i.children;
                    }
                    return i;
                });
            },
            setActiveMenu() {
                if (this.$route.matched.length >= 3) {
                    this.activeMenu = this.$route.matched[2].name;
                    return;
                }
                if (this.$route.matched.length >= 2) {
                    this.activeMenu = this.$route.matched[1].name;
                    return;
                }
                this.activeMenu = this.$route.name;
            },
            logout() {
                const loadingInstance = Ele.$loading();
                SessionStore.clearAll();
                LocalStore.clearAll();
                //this.$router.push('/login');
                loadingInstance.close();
                window.location.reload()
            },
            getMesgNum() {
                API.get('sys/notice/count',{
                    params:{
                        classification:2
                    }
                }).then(res => {
                    this.mesgNum = res.num;
                })
            },
            jump(data) {
                if (data.name === "Application.Create") {
                    // if (this.role == 1) {
                    //     return Ele.$alert('请先成为认证用户');
                    // }

                    let url = data.path.includes('application') ? data.path : ('/application/' + data.path);
                    window.open(location.origin + '/admin' + url, '_blank');
                    return;
                }
                if (data.name === "Application.ExCreate") {
                    // if (this.role == 1) {
                    //     return Ele.$alert('请先成为认证用户');
                    // }

                    let url = data.path.includes('application') ? data.path : ('/application/' + data.path);
                    window.open(location.origin + '/admin' + url, '_blank');
                    return;
                }
                return false;
            },
            changeCollaspe() {
                this.isCollapse = !this.isCollapse;
                bus.$emit('collapse-observe', this.isCollapse);
            }
        },
        mounted() {
            bus.$on('setMsgNum',(value)=>{
                this.mesgNum = value;
            })
            this.activeMenu = this.$route.name;

            window.onresize = debounce(() => {
                const screenWidth = document.body.clientWidth;
                this.isCollapse = screenWidth < 1024;
                bus.$emit('collapse-observe', this.isCollapse);
            }, 400);
        },
        created() {
            this.getMesgNum();
        }
    };
</script>

<style lang="scss">
    .el-menu--popup {
        .el-menu-item.is-active {
            color: #409EFF !important;
        }
    }

    .dashboard {
        min-height: 100vh;
        height: 100%;
        // min-width: 1024px;

        .el-dropdown-menu {
            margin-top: 20px;
        }

        .menu-collapse {
            // z-index: 2000;
            width: 80px;
            height: 100%;
            min-height: 100vh;
            background: #4D4F5A;
            transition: all .6s; // 收缩

            .el-menu {
                border-right: 0;
            }

            &:not(.isCollapse) {
                width: 270px;
                flex-shrink: 0;
                transition: all .6s; // 展开
                height: 100vh;
                overflow-y: auto;
            }
        }

        // header
        &-header {
            color: rgba(0, 0, 0, 0.65);
            padding: 0 20px;
            background: #fff;
            z-index: 1;

            .user-info {
                padding-right: 10px;

                .iconfont {
                    color: #02A7FB;

                    &.icon-message {
                        cursor: pointer;
                    }

                    &:nth-of-type(2n) {
                        font-weight: bold;
                    }
                }

                .mesg {
                    position: relative;
                    margin: 0 40px;

                    &::before,
                    &::after {
                        content: '';
                        position: absolute;
                        right: -20px;
                        top: 3px;
                        display: inline-block;
                        width: 1px;
                        height: 16px;
                        background-color: #dadada;
                    }

                    &::before {
                        left: -20px;
                    }
                }

                span {
                    // padding-right: 40px;
                    position: relative;
                }

                .click-area {
                    color: rgba(0, 0, 0, 0.65);
                    cursor: pointer;
                }
            }

            .fa.hamburger {
                font-size: 16px;
                color: #409eff;

                &:hover {
                    font-size: 1.25em;
                    box-shadow: 0 0 14px 1px rgba(0, 0, 0, 0.1);
                    border-radius: 50%;
                }
            }
        }

        // menu
        &-menu {
            width: 270px;
            flex-grow: 0;
            flex-shrink: 0;
            border-right: 0;
            background: #4D4F5A;

            .fa {
                width: 20px;
                font-size: 16px;
            }

            .site {
                height: 100px;
                line-height: 100px;
                padding-left: 20px;
                background: #4D4F5A;
                overflow: hidden;
                white-space: nowrap;
                color: #fff;
                font-size: 20px;
                font-weight: bold;

                .logo {
                    width: 40px;
                    height: 40px;
                    flex-shrink: 0;
                    margin-right: 12px;
                }

                .title {
                    letter-spacing: 4px;
                    font-weight: 400;
                }
            }

            &.el-menu--collapse {
                min-height: 100vh;
                width: 80px;
                height: 100%;
                overflow-y: scroll;
                overflow-x: hidden;
                background: transparent;
                border-right: 0;

                &::-webkit-scrollbar {
                    display:none
                }

                .el-menu-item {
                    &:focus,
                    &:hover,
                    &:hover i {
                        color: #fff;
                        background-color: #002140;
                    }

                    &.is-opened {
                        background-color: #ddd;
                    }
                }

                .site .title {
                    opacity: 0;
                }

                .el-submenu .el-menu-item {
                    background: #001529;
                }

                .el-submenu__title {
                    width: 80px;
                    .iconfont {
                        padding-left: 8px;
                    }

                    transition: all .1s;
                }
            }

            .el-menu, .el-footer {
                background-color: transparent;
            }
            .el-submenu {
                background: #4D4F5A;
                .el-submenu__title {
                    color: rgba(255, 255, 255, 0.65);

                    &:hover {
                        i, span {
                            color: #fff;
                        }
                        background-color: transparent;
                    }

                    .iconfont {
                        font-size: 24px;
                        margin-right: 12px;
                        height: 20px;
                    }
                }

                &.is-active {
                    .el-submenu__title {
                        background: #3D404C;
                    }
                    .el-submenu__title, .el-submenu__title i {
                        color: #fff;
                    }
                }
            }

            .el-menu-item {
                color: rgba(255, 255, 255, 0.65);
                background: #4D4F5A;

                &:focus,
                &:hover,
                &:hover > i {
                    color: #fff;
                    font-weight: bold;
                    background-color: transparent;
                }
                &.is-active {
                    span {
                        display: inline-block;
                        width: 230px;
                        height: 52px;
                        line-height: 52px;
                        color: #fff;
                        border-radius: 6px;
                        background-color: #1890ff;
                        margin-left: -40px;
                        padding-left: 40px;
                    }
                }
            }

            .el-menu-item,
            .el-menu--inline.el-submenu__title {
                height: 70px;
                line-height: 70px;
                font-weight: bold;
                padding-left: 60px !important;
                transition: width .3s;
            }
        }

        // content
        &-content {
            width: 100%;
            // z-index: 999;
            background-color: #f6f6f6;

            .el-card {
                overflow: auto;
                height: calc(100vh - 100px);
            }
        }
    }
</style>
